﻿<!DOCTYPE html>
<html>
<body>
    <h3>javascript simple MVC</h3>
    <div>
        <select name="" id="setAnimal">
            <option value="cat">cat</option>
            <option value="fish">fish</option>
            <option value="bird">bird</option>
        </select>
    </div>
    <p id="animalDo"></p>
    <script>
        // controller
        Animal = {
            start: function () {
                this.view.start(); //从视图触发
            },
            set: function (animalName) {
                this.model.setAnimal(animalName);
                //controller 改变 model 
            }
        };
        // model
        Animal.model = {
            animalDictionary: {
                car: 'meows',
                fish: 'swims',
                bird: 'flies'
            },
            currentAnimal: null,
            setAnimal: function (name) {
                this.currentAnimal = this.animalDictionary[name] ? name : null;
                this.onchange();
            },
            onchange: function () {
                Animal.view.update();
                //model传递结果到View(个人觉得这里可以由Controller来专递，最好不要直接操作视图)
            },
            getAnimalAction: function () {
                return this.currentAnimal ? this.currentAnimal + ' ' + this.animalDictionary[this.currentAnimal] :
                    'unknow';
            }
        };
        // view
        Animal.view = {
            start: function () {
                document.getElementById('setAnimal').onchange = this.onchange;
                //视图绑定事件
            },
            onchange: function () {
                Animal.set(document.getElementById('setAnimal').value);
                //视图执行操作，调用Controller
            },
            update: function () {
                //视图执行最后的更新响应  
                console.log(Animal.model.getAnimalAction());
                document.getElementById('animalDo').innerHTML = Animal.model.getAnimalAction();
            }
        };
        Animal.start(); //入口
    </script>
</body>

</html>